{extend name="../../admin/view/main"}

{block name="style"}{include file='eduenroll/form-style'}{/block}

{block name='content'}
<style>
    .upload-image-box {
        width: 130px;
        height: 110px;
        border: 1px solid rgba(125, 125, 125, .1);
        background-size: cover;
    }
    .upload-file-box {
        width: 80px;
        height: 50px;
        border: 1px solid rgba(125, 125, 125, .1);
        background-size: cover;
    }


</style>
<div id="infoFormEditor" class="layui-clear nowrap padding-bottom-30">
    <div class="layui-card news-right">
        <div class="layui-card-body">
            <!--<form onsubmit="return false" data-auto="true" action="{:request()->url()}" method="post" class='layui-form layui-card' autocomplete="off">-->
            <form class="layui-form padding-20" role="form" name="infoForm" onsubmit="return false">

                <table width="100%">
                    <tr>
                        <td style="padding-right:20px;">
                            <label class="layui-form-item relative block">
                                <span class="color-green">考核名称</span>
                                <select name="class_id" class="layui-select" lay-filter="demo" lay-verify="required">
                                    <option value="">--请选择考核名称--</option>
                                    {foreach $classes as $key=>$vo}
                                    {if $vo.id eq $enroll.exam_id}
                                    <option selected value="{$vo.id}">{$vo.name}</option>
                                    {else}
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    {/if}
                                    {/foreach}
                                </select>
                            </label>
                        </td>
                        <td>
                            <label class="layui-form-item relative block">
                                <span required="" class="color-green">岗位及工种</span>
                                <select name="position_id" class="layui-select" lay-filter="demo1" lay-verify="required">
                                    <option value="">--请选择岗位及工种--</option>
                                    {foreach $position as $key=>$vo}
                                    <optgroup label="{$vo.name}">{$vo.name}</optgroup>
                                    {foreach $vo.sub as $key2=>$vo2}
                                    {if $vo2.id eq $enroll.position_id}
                                    <option selected value="{$vo2.id}">{$vo2.name}</option>
                                    {else}
                                    <option value="{$vo2.id}">{$vo2.name}</option>
                                    {/if}
                                    {/foreach}
                                    {/foreach}
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right:20px;">
                            <label class="layui-form-item relative block">
                                <span class="color-green">学员姓名</span>
                                <input maxlength="32" value="{$enroll.name}" required placeholder="请在这里输入学生姓名" name='name' class="layui-input">
                            </label>
                        </td>
                        <td>
                            <label class="layui-form-item relative block">
                                <span class="color-green" required="">性别</span>
                                <div class="block">
                                    {if $enroll.gender eq '男'}
                                    <input type="radio" name="gender" lay-filter="GenderRadio" value="男" title="男" checked />
                                    <input type="radio" name="gender" lay-filter="GenderRadio" value="女" title="女" />
                                    {else}
                                    <input type="radio" name="gender" lay-filter="GenderRadio" value="男" title="男" />
                                    <input type="radio" name="gender" lay-filter="GenderRadio" value="女" title="女" checked />
                                    {/if}
                                </div>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right:20px;">
                            <label class="layui-form-item relative block">
                                <span class="color-green">身份证</span>
                                <input maxlength="32" value="{$enroll.idno}" required placeholder="请在这里输入身份证" name='idno' class="layui-input">
                            </label>
                        </td>
                        <td>
                            <label class="layui-form-item relative block">
                                <span class="color-green">联系电话</span>
                                <input maxlength="32" value="{$enroll.phone}" required placeholder="请在这里输入联系电话" name='phone' class="layui-input">
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right:20px;">
                            <label class="layui-form-item relative block">
                                <span class="color-green">工作单位</span>
                                <input maxlength="32" value="{$enroll.company}" required placeholder="请在这里输入工作单位" name='company' class="layui-input">
                            </label>
                        </td>
                        <td>
                            <label class="layui-form-item relative block">
                                <span class="color-green">所在市州</span>
                                <select required name="city" class="layui-select" lay-filter="demo2">
                                    <option value="">--请选择市州--</option>
                                    {foreach $CITY_OPTION as $key=>$vo}
                                    {if $vo eq $enroll.city}
                                    <option selected value="{$vo}">{$vo}</option>
                                    {else}
                                    <option value="{$vo}">{$vo}</option>
                                    {/if}
                                    {/foreach}
                                </select>
                            </label>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-right: 20px;vertical-align: top;">
                            <label class="layui-form-item relative block">
                                <span class="color-green">报名时间</span>
                                <input id="occur_time" ng-model="item.occur_time" required placeholder="请在这里输入报名时间" name='occur_time' class="layui-input">
                            </label>
                        </td>
                        <td>
                            <label class="layui-form-item relative block">
                                <span class="color-green" required="">头像</span>
                                <div class="layui-clear">
                                    <div class="upload-image-box pull-left transition" data-tips-image="{{item.avatar}}" style="{{item.style}}">
                                        <input ng-model="item.avatar" data-auto-none value="{{item.avatar}}" type="hidden" name="avatar">
                                    </div>
                                    <div class="pull-left padding-top-15 padding-left-15">
                                        <button type="button" data-title="上传头像" data-file="btn" data-type="jpg,png,jpeg" data-field="avatar" class="layui-btn layui-btn-sm layui-btn-primary">上传头像</button>
                                    </div>
                                </div>
                                <p class="color-desc">封面大图片建议尺寸 64像素 * 64像素</p>
                            </label>
                        </td>
                    </tr>
                </table>
                <div class="layui-form-item text-center padding-top-30">
                    <input ng-model="x.read_num" type="hidden">
                    <button ng-click="submit()" type="button" class="layui-btn">保存信息</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div name="annex-template" style="display: none;">
    <div class="item" file="__URL__">
        <a target="_blank" href="__URL__">__TITLE__</a>
        <span class="font-s20 fa fa-trash"></span>
    </div>
</div>
{/block}


{block name='script'}
<script>window.form.render()</script>
<script>

    var classes = '{$classesJson|raw}';
    classes = classes.replace(/\s+/g,"");
    var classesJson = JSON.parse(classes);

    layui.use(['layer', 'jquery', 'form'], function () {
        layui.form.on('select(demo)', function(data){
            let positions = getClassPositions(data.value);
            let html = '<option value="">--请选择工种--</option>';
            for(let i=0; i<positions.length; i++){
                html += '<optgroup label="'+positions[i].name+'">'+positions[i].name+'</optgroup>';

                for(let j=0; j<positions[i]['sub'].length; j++) {
                    html += '<option value="' + positions[i]['sub'][j]['id'] + '">' + positions[i]['sub'][j]['name'] + '</option>'
                }
            }
            $("select[name=position_id]").html(html);
            layui.form.render();
        });
        layui.form.on('radio(GenderRadio)', function(data){
            $("input[name=gender]").val(data.value);
        });
    });

    function getClassPositions(class_id){
        for(let i=0; i<classesJson.length; i++) {
            if(classesJson[i].id == class_id)
                return classesJson[i]['sub'];
        }
    }

    function doChoiceClass(dataId, dataName){

        $("input[name='class_id']").val(dataId);
        $("input[name='class_name']").val(dataName);
        layer.close(layer.index);
    }

    function doChoiceStudent(dataId, dataName){
        $("input[name='student_id']").val(dataId);
        $("input[name='student_name']").val(dataName);
        layer.close(layer.index);
    }

    laydate.render({
        elem: '#occur_time' //指定元素
    });


        require(['angular', 'ckeditor'], function () {

            /*layui.use(['form'], function () {
                var form = layui.form;
            });*/

        var editor;
        var $form = $('form[name="infoForm"]');
        var $vali = $form.vali().data('validate');

        var app = angular.module("infoFormEditor", []).run(callback);
        angular.bootstrap(document.getElementById(app.name), [app.name]);

        function callback($rootScope) {
            $rootScope.list = [];
            $rootScope.item = {};
            $.form.load('{:request()->url()}', {output: 'json'}, 'get', function (ret) {
                console.log(typeof ret);
                console.log(ret);
                return $rootScope.$apply(function () {
                    apply(ret.data || {});
                }), false;
            });
                function apply(qiye) {
                    if(qiye.id==undefined) qiye = {
                        name: '', phone: '', contacts: '',intro:'',
                        addr: '', avatar: '__ROOT__/static/theme/img/image.png'
                    };
                    $rootScope.item = qiye;
                    $('.layui-card-body.layui-hide').removeClass('layui-hide');
                    $rootScope.item.style = "background-image:url('" + $rootScope.item.avatar + "')";
                }
            $rootScope.setItemValue = function (name, value) {
                $rootScope.item[name] = value;
                $rootScope.item.style = "width:80px;height:80px;background-image:url('" + $rootScope.item.avatar + "')";
            };

            $rootScope.upItem = function (index, $event) {
                $event.stopPropagation();
                var tmp = [], cur = $rootScope.list[index];
                if (index < 1) return false;
                for (var i in $rootScope.list) {
                    (parseInt(i) === parseInt(index) - 1) && tmp.push(cur);
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.list[i]);
                }
                apply(tmp);
            };
            $rootScope.dnItem = function (index, $event) {
                $event.stopPropagation();
                var tmp = [], cur = $rootScope.list[index];
                if (index > $rootScope.list.length - 2) return false;
                for (var i in $rootScope.list) {
                    (parseInt(i) !== parseInt(index)) && tmp.push($rootScope.list[i]);
                    (parseInt(i) === parseInt(index) + 1) && tmp.push(cur);
                }
                apply(tmp);
            };
            $rootScope.delItem = function (index, $event) {
                $event.stopPropagation();
                var list = $rootScope.list, temp = [];
                for (var i in list) (parseInt(i) !== parseInt(index)) && temp.push(list[i]);
                apply(temp);
            };
            $rootScope.submit = function () {
                $vali.checkAllInput();

                if(!$("select[name=class_id]").val()){
                    $("select[name=class_id]").addClass("layui-form-danger").focus();
                    return $.msg.tips('请选择考核名称');
                }
                if(!$("select[name=position_id]").val()){
                    $("select[name=position_id]").addClass("layui-form-danger").focus();
                    return $.msg.tips('请选择工种');
                }
                if(!$("select[name=city]").val()){
                    $("select[name=city]").addClass("layui-form-danger").focus();
                    return $.msg.tips('请选择州市');
                }

                if ($form.find('.validate-error').size() > 0) {
                    return $.msg.tips('表单验证不成功，请输入需要的内容！');
                }
                var data = {
                    id: $rootScope.item.id,
                    //class_id: $("input[name='class_id']").val(),
                    name: $("input[name='name']").val(),
                    idno: $("input[name='idno']").val(),
                    phone: $("input[name='phone']").val(),
                    company: $("input[name='company']").val(),
                    gender: $("input[name='gender']:checked").val(),
                    avatar: $("input[name='avatar']").val(),
                    position_id: $("select[name='position_id']").val(),
                    class_id: $("select[name='class_id']").val(),
                    position_name: $("select[name='position_id']").find("option:selected").text(),
                    occur_time: $("input[name=occur_time]").val(),
                };
                $.form.load('{:request()->url()}', {data: data}, "post");
            };

            $('[name="avatar"]').on('change', function (value) {
                value = this.value;
                $rootScope.$apply(function () {
                    $rootScope.setItemValue('avatar', value);
                });
            });
        }

            $('[name="class_name"]').on('focus', function (value) {
                $(this).blur();
                $.post("/cms/educlass/widget",{},function(res) {
                    layer.open({
                        type: 1,area:'800px',
                        title: '选择班级'
                        ,content: res
                    });
                },"html");
            });

    });
</script>




{/block}